import React, {Component} from 'react';
import './index.css'

class Index extends Component {
    render() {
        const {users, isFirst, isLoading, err} = this.props
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
                        isLoading ? <h2>Loading...</h2> :
                            err ? <h2 style={{color: 'red'}}>{err}</h2> :
                                users.map(item => {
                                    return (
                                        <div key={item.id} className="card">
                                            <a href={item.html_url} rel="noreferrer" target="_blank">
                                                <img alt="head_portrait" src={item.avatar_url}
                                                     style={{width: '100px'}}/>
                                            </a>
                                            <p className="card-text">{item.login}</p>
                                        </div>
                                    )
                                })
                }
            </div>
        );
    }
}

export default Index;